<template>
  <Card title="成交占比" :loading="loading" hoverable>
    <template #extra>
      <div class="extra-item">
<!--        <a-radio-group size="default">
          <a-radio-button value="large">日</a-radio-button>
          <a-radio-button value="default">月</a-radio-button>
          <a-radio-button value="small">年</a-radio-button>
        </a-radio-group>-->
        <a-range-picker style="margin-left: 20px" @change="dataChange"/>
      </div>
    </template>
    <div ref="chartRef" :style="{ width, height }"></div>
  </Card>
</template>
<script lang="ts" setup>
import {Ref, ref, watch} from 'vue'
import {Card} from 'ant-design-vue'
import {useECharts} from '@/hooks/web/use-echarts'
import {useDataSource} from "@/hooks/web/use-echarts/useDataSource";

let giftImageUrl = "";

const props = defineProps({
  loading: Boolean,
  width: {
    type: String as PropType<string>,
    default: '100%',
  },
  height: {
    type: String as PropType<string>,
    default: '350px',
  },
})

const chartRef = ref<HTMLDivElement | null>(null)
const {setOptions} = useECharts(chartRef as Ref<HTMLDivElement>)

let {queryData} = useDataSource(props, initOptions);

/**
 * 初始化
 */
function initOptions(chartData) {
  let option: any = {

    graphic: {
      elements: [{
        type: 'image',
        style: {
          image: giftImageUrl,
          width: 50,
          height: 50
        },
        left: 'center',
        top: 'center'
      }]
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 20,
      top: 20
    },
    series: [{
      type: 'pie',
      roseType: 'radius',
      radius: ['30%', '60%'],
      data: [{
        value: chartData.registerUserNum || 0,
        name: '注册'
      }, {
        value: chartData.buyVipcardUserNum || 0,
        name: '办理'
      }, {
        value: chartData.refundVipcardNum || 0,
        name: '现办现退'
      }
      ],
      label: {
        rich: {
          font: {
            fontSize: 20,
            padding: [5, 0],
            color: '#000000'
          },
          hr: {
            height: 0,
            borderWidth: 1,
            width: '100%',
            borderColor: '#000000'
          }
        }

      },
      labelLine: {
        lineStyle: {
          color: '#000000'
        }
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0,0,0,0.5)'
        }
      }
    }]
  }
  setOptions(option);
}

function initData(params) {
  queryData({
    url: "adminTotal/converProportion",
    params
  });
}

function dataChange(dates,dataStr) {

  initData({
    startDate:dataStr[0],
    endDate:dataStr[1],
  })
}


watch(
    () => props.loading,
    () => {
      if (props.loading) {
        return
      }
      //initData({})
    },
    {immediate: true},
)

</script>
